<template>
	<view>
		<view class="tel-login-contain">
			<form @submit="formSubmit" @reset="formReset">
				<view class="tel-input">
					<input class="login-input" name="telephone" @input="telInput" placeholder="请输入手机号" placeholder-style='color:#D3D3D3;font-size:36upx;font-weight:500'/>
					<text v-show="regTel"  class="tel-input-reg-active" @click="openSlider">{{Number(regText)?(regText+'秒'):regText}}</text>
					<text v-show="!regTel" class="tel-input-reg">{{regText}}</text>
				</view>
				<sunui-mverify class="mverify" v-if="isShowSlider" @change="mverify"></sunui-mverify>
				<view class="tel-reg">
					<input class="login-input" name="regcode" placeholder="请输入验证码" placeholder-style='color:#D3D3D3;font-size:36upx;font-weight:500' />
				</view>
				<view v-show="!regTel" class="login-btn">
					<button>登录</button>
				</view>
				<view v-show="regTel" class="login-btn-active">
					<button form-type="submit">登录</button>
				</view>
			</form>
		</view>
		
	</view>
</template>

<script>
	import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				regText:"获取验证码",
				regTel:false,
				telephone:'',
				telReg:/^1[1234567890]\d{9}$/,
				isShowSlider:false,
			}
		},
		components:{
			sunuiMverify
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo','SetIsSubscribe','setToken','clearPermList','setPermList','setMainAccount']),
			//获取未读信息
			getMsgMap() {
				this.$request.get({
					url: 'sysMessage/getMsgMap',
				}).then(info => {
					console.log('info', info)
					for (let k of info) {
						if (k.label == '通知') {
							this.sysNum = k.value?k.value:0
						}
						if (k.label == '评论') {
							this.commitNum = k.value?k.value:0
						}
					}
					//显示小圆点
					if(parseFloat(this.sysNum)!==0||parseFloat(this.commitNum)!==0){
					      uni.showTabBarRedDot({index:2});
					}
				}, res => {});
			},
			//打开滑块
			openSlider(){
			  	this.isShowSlider = true;
			},
			mverify(e){
				if(e.msg){
					this.getReg()
					setTimeout(()=>{
						this.isShowSlider = false;
					},1000)
				}
			},
			//获取验证码
			getMessageCode(){
				this.$request.post({
					url: 'message/sendMessage',
					data: {
						telephoneNumber:this.telephone
					},
				}).then(res=>{
				})
			},
			//清空权限信息
			clearPermission(){
				this.clearPermList();
				uni.setStorageSync('permList','')
			},
			formSubmit: function(e) {
				let formdata = e.detail.value;
				let telRegResult = this.telReg.test(formdata.telephone);
				if(!telRegResult){
					uni.showToast({ title: "请输入正确的手机号", icon: "none" });
					return false;
				}
				if(formdata.regcode===''||formdata.regcode==='undefined'){
					uni.showToast({ title: "请输入验证码", icon: "none" });
					return false;
				}
				try {
				    const openId = uni.getStorageSync('openid');
					this.$request.post({
						url: 'user/miniLogin',
						data: {
							phoneNumber:formdata.telephone-0,
							message:formdata.regcode-0,
							
						},
					}).then(res=>{
							this.$request.get({
								url:'userOrgRelation/getMyAccountNew',
								header:{
									token:res.userInfo.token
								}
							})
							.then(v=>{
								if(v.length===1){
									this.clearPermission();
									// uni.setStorageSync('userInfo', res.userInfo);
									// this.saveUserInfo(res.userInfo);
									// uni.setStorageSync('autoGoLoginFlag', false);
									// this.SetIsSubscribe(true)
									// this.setToken(res.userInfo.token)
									// getApp().connectWS();
									//判断是否显示未读消息红点
									// this.getMsgMap();						
									// uni.switchTab({
									//     url: '/pages/myinfo/myinfo'
									// });
									
									let  params = {};
									params.userInfoId = v[0].userInfoId;
									params.orgInfoId = v[0].orgInfoId;
									params.kcOpenId = openId;
									this.$request.post({
										url:'/userOrgRelation/setMyAccount',
										data:params,
										header:{
											token:res.userInfo.token
										}
									}).then(result=>{
										let userInfo = result.userInfo;
										let mainAccount = result.mainAccount;
										userInfo.token = res.userInfo.token;
										uni.setStorageSync('userInfo', userInfo);
										uni.setStorageSync('mainAccount',mainAccount);
										this.setMainAccount(mainAccount)
										this.saveUserInfo(userInfo);
										uni.setStorageSync('autoGoLoginFlag', false);				
										let empt = {};
										result.permList.map((v)=>{
											empt[v.perms]= true;
										})
										uni.setStorageSync('permList',empt)
										this.setPermList(empt)
										this.SetIsSubscribe(true)
										//判断是否显示未读消息红点
										this.getMsgMap();
										getApp().connectWS();
										uni.switchTab({
										    url: '/pages/myinfo/myinfo'
										});
									})
								}else {
									this.setToken(res.userInfo.token)
									uni.navigateTo({
										url:`/pagesA/select-account/select-account?openid=${openId}`
									})
								}
							})	
					})
					return
				} catch (e) {
				    // error
				}
			},
			formReset: function(e) {
			},
			//如果当前是数字，则不可点击
			getReg(){
				if(!Number(this.regText)){
					this.regText=60;
					this.regTime();
					this.getMessageCode();
					
				}
			},
			//验证手机号，通过则可点击获取验证码
			telInput(e){
				this.telephone=e.detail.value;
				if(this.telReg.test(e.detail.value)){
					this.regTel = true;
				}else{
					this.regTel = false;
				}
			},
			//验证码定时触发事件
			regTime(){
				let regSetInterval=setInterval(()=>{
					if(this.regText>0){
						this.regText-=1;
					}else{
						this.regText='获取验证码';
						clearInterval(regSetInterval);
					}
					
				},1000)
			}
		}
	}
</script>

<style scoped>
	.tel-login-contain{
		padding: 162upx 80upx;
	}
	.login-input{
		border-bottom: 1px solid #DEDEDE;
		padding: 0upx 154upx 27upx 20upx;
	}
	.tel-reg{
		margin-top: 52upx;
	}
	.login-btn{
		margin-top: 91upx;
		border: none;
	}
	.login-btn>button{
		background-color: #E5E5E5;
		border-radius: 8upx;
		font-size:36upx;
		border: none;
		font-family:PingFang-SC-Medium,PingFang-SC;
		font-weight:500;
		color:rgba(152,152,152,1);
	}
	.login-btn>button::after{
		border:none;
	}
	.login-btn-active{
		margin-top: 91upx;
		border: none;
	}
	.login-btn-active>button{
		background:rgba(42,125,250,1);
		border-radius:8px;
		font-size:36upx;
		font-family:PingFang-SC-Medium,PingFang-SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.login-btn-active>button::after{
		border:none;
	}
	.tel-input{
		position: relative;
	}
	.tel-input-reg{
		font-size:30upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(211,211,211,1);
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
	}
	.tel-input-reg-active{
		font-size:30upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:#2A7DFA;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 11;
	}
</style>
